<template>
  <div>
    <ConTitle :topTitle="topTitle"> </ConTitle>

    <template>
      <el-table :data="securitylist" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="tag" label="标签"> </el-table-column>
        <el-table-column prop="id" label="密钥ID"> </el-table-column>
        <el-table-column prop="authority" label="访问权限"> </el-table-column>
        <el-table-column prop="address" label="密钥状态">
          <template slot-scope="scope">
            {{ scope.row.online | typefn }}
          </template>
        </el-table-column>

        <el-table-column prop="address" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.cTime | formatime }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="更新时间">
          <template slot-scope="scope">
            {{ scope.row.uTime | formatime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="edinfun(scope.row.id, scope.row.authority, scope.row.tag)"
              class="minibtn"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handlefn(scope.row.id)"
              class="minibtn1"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 弹框 -->
    <el-dialog title="修改账户信息" :visible.sync="dialogVisible" width="30%">
      <el-form
        :rules="rules"
        :model="ruleFrom"
        ref="ruleFrom"
        class="demo-form-inline"
      >
        <el-form-item prop="groupName">
          <el-input
            v-model="ruleFrom.authority"
            placeholder="修改用户访问权限"
          ></el-input>
        </el-form-item>
        <el-form-item prop="groupName">
          <el-input
            v-model="ruleFrom.tag"
            placeholder="修改用户标签"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addfn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { $securitylist, $securityedit, $securitydel } from "@/api";
import moment from "moment";
import ConTitle from "@/components/ConTitle.vue";

export default {
  name: "SecList",
  data() {
    return {
      topTitle: {
        type: "安全", //非首页，显示上一级
        text: "API访问秘钥",
        msg: "使用访问密钥向SenseCAP API服务发出安全的REST或HTTP请求",
      },
      securitylist: [],
      editId: "",
      dialogVisible: false,
      ruleFrom: { authority: "", tag: "" },
      rules: {
        authority: [
          { required: true, message: "请输入权限等级", trigger: "blur" },
        ],
        tag: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    handlefn(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $securitydel({ id: id }).then((res) => {
            if (res.msg == "success") {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getdate();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edinfun(id, name, tag) {
      this.dialogVisible = true;
      this.editId = id;
      this.ruleFrom.authority = name;
      this.ruleFrom.tag = tag;
    },
    addfn() {
      console.log(6666);
      if (this.editId !== "") {
        this.$refs.ruleFrom.validate((valid) => {
          if (valid) {
            $securityedit({
              authority: this.ruleFrom.authority,
              tag: this.ruleFrom.tag,
              id: this.editId,
            }).then((res) => {
              if (res.msg == "success") {
                this.dialogVisible = false;
                this.getdate();
              }
            });
          } else {
            return false;
          }
        });
      }
    },
    getdate() {
      $securitylist().then((res) => {
        console.log(res.data);
        this.securitylist = res.data;
      });
    },
  },
  mounted() {
    this.getdate();
  },
  components: {
    ConTitle,
  },
  filters: {
    typefn(value) {
      return value ? "使用中" : "未使用";
    },
    formatime(value) {
      return moment(value).format("YYYY-MM-DD");
    },
  },
};
</script>

<style lang="scss" scoped>
.minibtn {
  width: 35px;
  text-align: center;
}
.minibtn1 {
  width: 35px;
  background: #f56c6c;
  border: none;
}
</style>